<template>
  <div class="all">
    <vxe-toolbar>
      <template #buttons>
        <vxe-button @click="$refs.xTree.setAllTreeExpand(true)">展开所有</vxe-button>
        <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>
        <vxe-button @click="exportExcel()">导出</vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      resizable
      ref="xTree"
      highlight-hover-row
      border="inner"
      row-key
      :tree-config="{ line: true, children: 'childrenList'}"
      @custom="customInfo"
      :data="tableData">
      <vxe-table-column field="city" width="10%" title="区县名称" tree-node></vxe-table-column>
      <vxe-table-column field="city_code" width="7%" title="区县机构编码"></vxe-table-column>
      <vxe-table-column field="city_area_code" width="5%" title="区县行政编码"></vxe-table-column>
      <vxe-table-column field="street" width="7%" title="街道名称"></vxe-table-column>
      <vxe-table-column field="street_code" width="7%" title="街道机构编码"></vxe-table-column>
      <vxe-table-column field="street_area_code" width="5%" title="街道行政编码"></vxe-table-column>
      <vxe-table-column field="community" width="7%" title="社区名称"></vxe-table-column>
      <vxe-table-column field="community_code" width="7%" title="社区机构编码"></vxe-table-column>
      <vxe-table-column field="community_area_code" width="5%" title="社区行政编码"></vxe-table-column>
      <vxe-table-column field="title" width="8%" title="名称"></vxe-table-column>
      <vxe-table-column field="area_code" width="8%" title="区域编码"></vxe-table-column>
      <vxe-table-column field="company_code" width="8%" title="机构编码"></vxe-table-column>
      <vxe-table-column field="create_time" width="7%" title="创建时间"></vxe-table-column>
      <vxe-table-column field="level" width="3%" title="等级"></vxe-table-column>
<!--      <vxe-table-column field="lveelid" width="0%" title="等级编号"></vxe-table-column>-->
      <vxe-table-column v-if="show" field="pid" width="0%" title="父级编号"></vxe-table-column>
      <vxe-table-column v-if="show" field="path" width="0%" title="路径"></vxe-table-column>
      <vxe-table-column v-if="show" field="ids" width="0%" title="所有父级id"></vxe-table-column>
      <vxe-table-column width="20%" title="操作">
        <template v-slot="{ row }">
          <Button size="small" v-if="row.level !== '4'" type="primary" style="margin-right: 10px;" @click="addInfo(row)">添加下级</Button>
          <Button size="small" v-if="row.level !== '1'" type="info" style="margin-right: 10px" @click="updateInfo(row)">修改</Button>
          <Button size="small" v-if="row.level !== '1'" type="success" style="margin-right: 10px" @click="bindCode(row)">绑定机构编码</Button>
          <Button size="small" v-if="row.level !== '1'" type="error" style="margin-right: 10px" @click="deleteInfo(row)">删除</Button>
        </template>
      </vxe-table-column>
    </vxe-table>
    <Table style="display: none" ref="communityInfo" :data="dataList" :columns="columns"></Table>
    <Modal
      v-model="modal"
      :title="modalTitle">
      <Form :model="paramInfo" :label-width="100">
<!--        <FormItem label="上级标签">-->
<!--          <Input v-model="info.name" placeholder="上级标签"></Input>&lt;!&ndash; 这是上级标签的信息 &ndash;&gt;&lt;!&ndash;  &ndash;&gt;-->
<!--        </FormItem>-->
        <FormItem label="区县名称" v-if="paramInfo.level > 2">
<!--          <Input v-if="paramInfo.level === 2" v-model="paramInfo.city" placeholder="请输入区县名称"></Input> &lt;!&ndash; 判断当前的等级是否为2级，2级则是编辑 &ndash;&gt;-->
          <Select :disabled="modalTitle === '添加'" v-if="paramInfo.level > 2" v-model="paramInfo.city" @on-change="getSelectMailList(paramInfo.city, 'cityList', 'streetList')" filterable>
            <Option v-for="item in areaList.cityList" :value="item.city" :key="item.city">{{ item.city }}</Option>
          </Select>
        </FormItem>
        <FormItem label="街道名称" v-if="paramInfo.level > 3">
<!--          <Input v-if="paramInfo.level === 3" v-model="paramInfo.street" placeholder="请输入街道名称"></Input> &lt;!&ndash; 判断当前的等级是否为3级，3级则是编辑 &ndash;&gt;-->
          <Select :disabled="modalTitle === '添加'" v-if="paramInfo.level > 3" v-model="paramInfo.street" @on-change="getStreetInfo(paramInfo.street)" filterable>
            <Option v-for="item in areaList.streetList" :value="item.street" :key="item.street">{{ item.street }}</Option>
          </Select>
        </FormItem>
<!--        <FormItem label="社区名称" v-if="paramInfo.level >= 4">-->
<!--          <Input v-if="paramInfo.level === 4" v-model="paramInfo.community" placeholder="请输入社区名称"></Input>-->
<!--        </FormItem>-->
        <FormItem label="名称">
          <Input v-model="paramInfo.title" placeholder="请输入名称"></Input>
        </FormItem>
        <FormItem label="区域编码">
          <Input v-model="paramInfo.area_code" placeholder="请输入区域编码"></Input>
        </FormItem>
<!--        <FormItem label="机构编码">-->
<!--          <Input v-model="paramInfo.company_code" placeholder="请输入机构编码"></Input>-->
<!--        </FormItem>-->
      </Form>
      <template #footer>
        <Button v-if="modalTitle === '添加'" type="primary" @click="saveOk()">确定</Button>
        <Button v-if="modalTitle === '编辑'" type="primary" @click="updateOk()">确定</Button>
        <Button @click="modal = false">取消</Button>
      </template>
    </Modal>
    <Modal v-model="deleteModal" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>删除确认</span>
      </p>
      <div style="text-align:center">
        <p>删除此行政区划后，所有下级行政区划都将被删除</p>
        <p>是否继续删除？</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long @click="deleteOk()">确认删除</Button>
      </div>
    </Modal>
    <Modal v-model="bindModal" width="360" title="机构绑定" @on-ok="bindOk">
      <Form :model="bindInfo" :label-width="100">
        <FormItem label="机构编码">
          <Select v-model="bindInfo.company_code" clearable filterable style="width:200px">
            <Option v-for="item in codeList" :value="item.company_code" :key="item.company_code">{{ item.company_code }}</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import { findAuditRegionTreeList, findAuditRegionList, createDownInfo, updateInfo, getCommunityOfficeList, getOfficeInfoList, updateCommunityCode } from '@/api/eventlist'
export default {
  data () {
    return {
      tableData: [
        { city: '鞍山市', level: '1', id: '0' }
      ],
      deleteModal: false, // 删除确认modal
      bindModal: false, // 绑定机构编码modal
      modal: false,
      show: false,
      modalTitle: '',
      deleteData: {},
      info: {},
      paramInfo: {},
      bindInfo: {},
      codeList: [],
      areaList: [],
      labelList: [],
      columns2: [],
      column: [],
      columns: [
        { title: 'id', key: 'id' },
        { title: '区县', key: 'city' },
        { title: '区县机构编码', key: 'city_code' },
        { title: '区县行政编码', key: 'city_area_code' },
        { title: '街道', key: 'street' },
        { title: '街道机构编码', key: 'street_code' },
        { title: '街道行政编码', key: 'street_area_code' },
        { title: '社区', key: 'community' },
        { title: '社区机构编码', key: 'community_code' },
        { title: '社区行政编码', key: 'community_area_code' },
        { title: '名称', key: 'title' },
        { title: '区域编码', key: 'area_code' },
        { title: '机构编码', key: 'company_code' },
        { title: '等级', key: 'level' },
        { title: '等级编号', key: 'levelid' },
        { title: '上级id', key: 'pid' },
        { title: '路径', key: 'path' },
        { title: '上级路径', key: 'ids' }
      ],
      dataList: []
    }
  },
  methods: {
    init () {
      this.tableData = [ { city: '鞍山市', level: '1', id: '0' } ]
      findAuditRegionTreeList().then(res => {
        if (res.data.errcode === 0) {
          // this.tableData = res.data.data.auditRegionTreeList
          // this.tableData[0].childrenList = res.data.data.auditRegionTreeList
          this.$set(this.tableData[0], 'childrenList', res.data.data.auditRegionTreeList)
        } else {
          this.$Notice.error({ title: '获取区划码信息拾失败', desc: res.data.errmsg })
        }
      })
    },
    addInfo (item) {
      console.log('这是添加下级的按钮')
      this.paramInfo = {}
      this.getMailList('0', 'cityList')
      this.modalTitle = '添加'
      this.info = this.$common.xeUtils.clone(item, true)
      if (item.level === '1') {
        this.info.name = '鞍山市'
      } else if (item.level === '2') {
        this.info.name = item.city
        this.paramInfo.city = item.city
        // this.paramInfo.city_code = item.city_code
        // this.paramInfo.city_area_code = item.city_area_code
      } else if (item.level === '3') {
        this.info.name = item.street
        this.paramInfo.city = item.city
        // this.paramInfo.city_code = item.city_code
        // this.paramInfo.city_area_code = item.city_area_cod
        this.paramInfo.street = item.street
        // this.paramInfo.street_code = item.street_code
        // this.paramInfo.street_area_code = item.street_area_code
      }
      this.paramInfo.level = parseInt(item.level) + 1
      console.log(this.paramInfo.level, '-----------------')
      this.modal = true
    },
    updateInfo (item) {
      console.log('这是修改的按钮')
      this.paramInfo = {}
      this.modalTitle = '编辑'
      this.getMailList('0', 'cityList')
      this.paramInfo = this.$common.xeUtils.clone(item, true)
      this.paramInfo.level = parseInt(this.paramInfo.level)
      this.modal = true
    },
    deleteInfo (item) {
      console.log('这是删除的按钮')
      this.deleteData = this.$common.xeUtils.clone(item, true)
      this.deleteModal = true
    },
    saveOk () { // 这是新增的确定的按钮
      console.log('这是新增的确定的按钮')
      let param = {
        area_code: this.paramInfo.area_code,
        pid: this.info.id,
        title: this.paramInfo.title
      }
      createDownInfo(param).then(res => {
        if (res.data.errcode === 0) {
          this.init()
          this.modal = false
          this.$Notice.success({ title: '添加成功', desc: '' })
        } else {
          this.$Notice.error({ title: '添加失败', desc: res.data.errmsg })
        }
      })
      console.log(param)
    },
    updateOk () {
      console.log('这是编辑确定按钮')
      if (this.paramInfo.level === 3) {
        let that = this
        console.log('走进来')
        that.areaList.cityList.forEach(function (item) {
          if (item.city === that.paramInfo.city) {
            that.paramInfo.pid = item.id
          }
        })
      }
      if (this.paramInfo.level === '4') {
        let that = this
        that.areaList.streetList.forEach(function (item) {
          if (item.street === that.paramInfo.street) {
            that.paramInfo.pid = item.id
          }
        })
      }
      let param = {
        area_code: this.paramInfo.area_code,
        pid: this.paramInfo.pid,
        title: this.paramInfo.title,
        id: this.paramInfo.id,
        del_flag: 0
      }
      updateInfo(param).then(res => {
        if (res.data.errcode === 0) {
          this.init()
          this.modal = false
          this.$Notice.success({ title: '修改成功', desc: '' })
        } else {
          this.$Notice.error({ title: '修改失败', desc: res.data.errmsg })
        }
      })
    },
    getMailList (pid, list) {
      findAuditRegionList({ pid: pid }).then(res => {
        if (res.data.errcode === 0) {
          this.$set(this.areaList, list, res.data.data)
          if (list === 'cityList') {
            let that = this
            that.areaList.cityList.forEach(function (item) {
              if (item.city === that.paramInfo.city) {
                console.log('看看进来了啊')
                that.getMailList(item.id, 'streetList')
              }
            })
          }
        } else {
          this.$Notice.error({ title: '获取级联信息时报', desc: res.data.errmsg })
        }
      })
    },
    getSelectMailList (name, list, bList) {
      if (list === 'cityList') {
        let that = this
        if (that.paramInfo.street) {
          that.paramInfo.street = ''
        }
        that.areaList.cityList.forEach(function (item) {
          if (item.city === name) {
            that.$nextTick(() => {
              that.paramInfo.city_code = item.city_code
              that.paramInfo.city_area_code = item.city_area_code
            })
            that.getMailList(item.id, bList)
          }
        })
      }
    },
    getStreetInfo (item) {
      this.areaList.streetList.forEach(function (info) {
        if (info.street === item) {
          this.paramInfo.street_code = info.city_code
          this.paramInfo.street_area_code = info.city_area_code
        }
      })
    },
    exportExcel () {
      console.log('这是导出的按钮')
      getCommunityOfficeList().then(ret => {
        if (ret.data.errcode === 0) {
          this.$refs.communityInfo.exportCsv({
            filename: '鞍山市行政区划',
            columns: this.columns,
            data: ret.data.data.map(k => {
              k.city_code = '\t' + k.city_code
              k.city_area_code = '\t' + k.city_area_code
              k.community_code = '\t' + k.community_code
              k.street_code = '\t' + k.street_code
              k.street_area_code = '\t' + k.street_area_code
              k.community_area_code = '\t' + k.community_area_code
              k.area_code = '\t' + k.area_code
              return k
            })
          })
          // this.$refs.xTree.exportData({
          //   filename: '沈阳市行政区划',
          //   type: 'csv',
          //   isHeader: true,
          //   isFooter: true,
          //   tableColumn: this.columns,
          //   data: list.map(k => {
          //     k.city_code = '\t' + k.city_code
          //     k.city_area_code = '\t' + k.city_area_code
          //     k.community_code = '\t' + k.community_code
          //     k.street_code = '\t' + k.street_code
          //     k.street_area_code = '\t' + k.street_area_code
          //     k.community_area_code = '\t' + k.community_area_code
          //     k.area_code = '\t' + k.area_code
          //     return k
          //   })
          //   // data:
          // })
        } else {
          this.$Notice.error({
            title: '导出失败！',
            desc: ret.data.errmsg
          })
        }
      })
    },
    customInfo () {
      console.log(this.$refs.xTree.getColumns())
    },
    deleteOk () {
      console.log(this.deleteData)
      let param = {
        area_code: this.deleteData.area_code,
        pid: this.deleteData.pid,
        title: this.deleteData.title,
        id: this.deleteData.id,
        del_flag: '1'
      }
      updateInfo(param).then(res => {
        if (res.data.errcode === 0) {
          this.init()
          this.deleteModal = false
          this.$Notice.success({ title: '删除成功', desc: '' })
        } else {
          this.$Notice.error({ title: '删除失败', desc: res.data.errmsg })
        }
      })
    },
    getCodeList () {
      getOfficeInfoList().then(res => {
        if (res.data.errcode === 0) {
          this.codeList = res.data.data
        } else {
          this.$Notice.error({ title: '获取失败', desc: res.data.errmsg })
        }
      })
    },
    bindCode (item) {
      this.bindInfo = this.$common.xeUtils.clone(item, true)
      this.bindModal = true
    },
    bindOk () {
      let param = {
        id: this.bindInfo.id,
        company_code: this.bindInfo.company_code,
        level: this.bindInfo.level
      }
      updateCommunityCode(param).then(res => {
        if (res.data.errcode === 0) {
          this.init()
          this.$Notice.success({ title: '修改成功', desc: '' })
        } else {
          this.$Notice.error({ title: '修改失败', desc: res.data.errmsg })
        }
      })
    }
  },
  mounted () {
    this.init()
    this.getMailList('0', 'cityList')
    this.getCodeList()
  }
}
</script>
<style>
.vxe-table .vxe-body--column, .vxe-table .vxe-footer--column, .vxe-table .vxe-header--column {
  text-align: center;
}
.ivu-btn-small {
  padding: 0 7px 2px;
}
</style>
